<template>
    <div class="ring-cheif">
        <div class="totalRingBox">
            <a-card class="item" v-for="(item, index) in totalRingList" :key="index">
                <div class="bigTitle">
                    <span style="color: #fff;">{{ item.position }}</span>&nbsp&nbsp&nbsp&nbsp&nbsp
                    <span style="color: #fff;">{{ item.name }}</span>
                </div>
                <span class="smallTitle" style="color: #fff;">{{ item.job }}</span>
            </a-card>
        </div>
        <div class="changeBox">
            <div class="card">
                <div class="title">
                    <div class="tip"></div>
                    <div class="txt" style="color:#F20200">片区环长名单</div>
                </div>
                <div class="fixed">
                    <div>序号</div>
                    <div>乡镇</div>
                    <div>片区环长</div>
                    <div>联系方式</div>
                    <div>备注</div>
                </div>
                <div class="itemFirst">
                    <div v-for="(item, index) in riskList[riskIndex]" :key="'fengxian' + index" class="itemSecond">
                        <div class="item1">
                            <div class="index">{{ item.index }}</div>
                            <div class="time">{{ item.country }}</div>
                            <div class="name">{{ item.partArea }}</div>
                            <div class="supply">{{ item.contact }}</div>
                            <div class="phone">{{ item.remark }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="title">
                    <div class="tip"></div>
                    <div class="txt">园区“环长制”名单</div>
                </div>
                <div class="fixed gardenFixed">
                    <div>序号</div>
                    <div>园区</div>
                    <div>村</div>
                    <div>环长</div>
                    <div>职务</div>
                    <div>联系方式</div>
                    <div>备注</div>
                </div>
                <div class="itemFirst">
                    <div v-for="(item, index) in partAreaList[partIndex]" :key="'partIndex' + index" class="itemSecond">
                        <div class="item1 gardenItem">
                            <div class="index">{{ item.index }}</div>
                            <div class="time">{{ item.garden }}</div>
                            <div class="name">{{ item.country }}</div>
                            <div class="supply">{{ item.partArea }}</div>
                            <div class="phone">{{ item.job }}</div>
                            <div class="phone">{{ item.contact }}</div>
                            <div class="phone">{{ item.remark }}</div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue"
//===============================变量=============
const districtRing = ref([
    {
        country: "陈家镇",
        name: "杨君",
        job: "党组副书记、副局长",
        contact: "",
        remark: ""
    },
    {
        country: "中兴镇",
        name: "杨君",
        job: "党组副书记、副局长",
        contact: "",
        remark: ""
    },
    {
        country: "向化镇",
        name: "杨君",
        job: "党组副书记、副局长",
        contact: "",
        remark: ""
    },
    {
        country: "港沿镇",
        name: "杨君",
        job: "党组副书记、副局长",
        contact: "",
        remark: ""
    }
]) as any
const partIndex = ref(0)
const riskIndex = ref(0)
const fixedHeight = ref(30)
const dynamicHeight = ref(0)
const itemSecondCount = ref(0)
const riskList = ref([
    {
        country: "陈家镇",
        partArea: "杨君",
        job: "党组副书记、副局长",
        contact: "",
        remark: ""
    },
    {
        country: "中兴镇",
        partArea: "杨君",
        job: "党组副书记、副局长",
        contact: "",
        remark: ""
    },
    {
        country: "港沿镇",
        partArea: "杨君",
        job: "党组副书记、副局长",
        contact: "",
        remark: ""
    },
    {
        country: "竖新镇",
        partArea: "杨君",
        job: "党组副书记、副局长",
        contact: "",
        remark: ""
    },
    {
        country: "堡镇",
        partArea: "杨君",
        job: "党组副书记、副局长",
        contact: "",
        remark: ""
    },
    {
        country: "新河镇",
        partArea: "杨君",
        job: "党组副书记、副局长",
        contact: "",
        remark: ""
    },
    {
        country: "建设镇",
        partArea: "杨君",
        job: "党组副书记、副局长",
        contact: "",
        remark: ""
    },
    {
        country: "东平镇",
        partArea: "张徽晟",
        job: "党组成员、副局长兼长兴分局局长",
        contact: "",
        remark: ""
    },
    {
        country: "城桥镇",
        partArea: "张徽晟",
        job: "党组成员、副局长兼长兴分局局长",
        contact: "",
        remark: ""
    },
    {
        country: "港西镇",
        partArea: "张徽晟",
        job: "党组成员、副局长兼长兴分局局长",
        contact: "",
        remark: ""
    },
    {
        country: "庙镇",
        partArea: "张徽晟",
        job: "党组成员、副局长兼长兴分局局长",
        contact: "",
        remark: ""
    },
    {
        country: "三星镇",
        partArea: "张徽晟",
        job: "党组成员、副局长兼长兴分局局长",
        contact: "",
        remark: ""
    },
    {
        country: "绿华镇",
        partArea: "张徽晟",
        job: "党组成员、副局长兼长兴分局局长",
        contact: "",
        remark: ""
    },
    {
        country: "新海镇",
        partArea: "张徽晟",
        job: "党组成员、副局长兼长兴分局局长",
        contact: "",
        remark: ""
    },
    {
        country: "新乡镇",
        partArea: "张徽晟",
        job: "党组成员、副局长兼长兴分局局长",
        contact: "",
        remark: ""
    },
    {
        country: "长兴镇",
        partArea: "王春龙",
        job: "党组成员、执法大队大队长",
        contact: "",
        remark: ""
    },
    {
        country: "横沙乡",
        partArea: "王春龙",
        job: "党组成员、执法大队大队长",
        contact: "",
        remark: ""
    },
    {
        country: "长兴镇",
        partArea: "王春龙",
        job: "党组成员、执法大队大队长",
        contact: "",
        remark: ""
    },
    {
        country: "横沙乡",
        partArea: "王春龙",
        job: "党组成员、执法大队大队长",
        contact: "",
        remark: ""
    },
    {
        country: "长兴镇",
        partArea: "王春龙",
        job: "党组成员、执法大队大队长",
        contact: "",
        remark: ""
    },
    {
        country: "横沙乡",
        partArea: "王春龙",
        job: "党组成员、执法大队大队长",
        contact: "",
        remark: ""
    },
    {
        country: "长兴镇",
        partArea: "王春龙",
        job: "党组成员、执法大队大队长",
        contact: "",
        remark: ""
    },
    {
        country: "横沙乡",
        partArea: "王春龙",
        job: "党组成员、执法大队大队长",
        contact: "",
        remark: ""
    },
    {
        country: "长兴镇",
        partArea: "王春龙",
        job: "党组成员、执法大队大队长",
        contact: "",
        remark: ""
    },
    {
        country: "横沙乡",
        partArea: "王春龙",
        job: "党组成员、执法大队大队长",
        contact: "",
        remark: ""
    },
    {
        country: "长兴镇",
        partArea: "王春龙",
        job: "党组成员、执法大队大队长",
        contact: "",
        remark: ""
    },
    {
        country: "横沙乡",
        partArea: "王春龙",
        job: "党组成员、执法大队大队长",
        contact: "",
        remark: ""
    }
]) as any
const totalRingList = ref([
    { name: "李俊", job: "区委副书记、区长", position: "总环长" },
    { name: "金彪", job: "副区长", position: "副总环长" },
    { name: "褚卫东", job: "党组书记、局长", position: "环长制办公室主任" }
])
const partAreaList = ref([
    {
        garden: "园区",
        country: "富盛开发区",
        partArea: "郁葱",
        job: "副总经理",
        contact: "",
        remark: ""
    },
    {
        garden: "园区",
        country: "长兴产业园区",
        partArea: "任海清",
        job: "副总经理",
        contact: "",
        remark: ""
    },
    {
        garden: "园区",
        country: "上海市崇明工业园区",
        partArea: "龚辉",
        job: "副总经理",
        contact: "",
        remark: ""
    }
]) as any
const typeId = ref(1)

//===========================方法==========、
onMounted(() => {
    initData()
    calculateItemSecondCount();
    setInterval(changeData, 5000);
})

function initData() {
    riskList.value = riskList.value.map((obj: any, index: any) => ({
        ...obj,
        index: index + 1
    }));
    partAreaList.value = partAreaList.value.map((obj: any, index: any) => ({
        ...obj,
        index: index + 1
    }));
}

function calculateItemSecondCount() {
    // 获取itemFirst的高度
    const itemFirstElement = document.getElementsByClassName("itemFirst")[0] as any;
    dynamicHeight.value = itemFirstElement.offsetHeight;
    // 计算可放置的itemSecond数量
    itemSecondCount.value = Math.floor(dynamicHeight.value / fixedHeight.value);
    riskList.value = listTransform(riskList.value, itemSecondCount.value);
    partAreaList.value = listTransform(
        partAreaList.value,
        itemSecondCount.value
    );
}

function listTransform(arr: any, j: any) {
    let finalResult = [];
    for (let i = 0; i < arr.length; i += j) {
        const subArray = arr.slice(i, i + j);
        finalResult.push(subArray);
    }
    return finalResult;
}

function changeData() {
    riskIndex.value++;
    if (riskIndex.value >= riskList.value.length) {
        // 已经到达数据列表的末尾
        riskIndex.value = 0; // 重置为0，重新开始循环
    }
    if (partIndex.value >= partAreaList.value.length) partIndex.value = 0;
}
</script>

<style lang="scss" scoped>
.ring-cheif {
    box-sizing: border-box;
    display: flex;
    height: 100%;
    flex-direction: column;
    // padding: 10px;
    row-gap: 10px;

    .totalRingBox {
        height: 20vh;
        display: flex;
        column-gap: 10px;

        .item {
            flex: 1;
            padding: 20px;
            background-color: rgb(9, 16, 85);
            color: white;

            .bigTitle {
                font-weight: bold;
                margin-bottom: 10px;
            }

            .smallTitle {
                font-size: 14px;
            }
        }
    }

    .changeBox {
        height: 80vh;
        display: flex;
        column-gap: 10px;

        .card {
            flex: 1;
            display: flex;
            flex-direction: column;
            background-color: rgb(17, 21, 52);
            padding: 10px;

            .itemFirst {
                flex: 1;
                display: flex;
                flex-direction: column;

                .itemSecond {
                    height: 30px;
                }
            }

            .title {
                height: fit-content;
                display: flex;
                padding: 10px 0;
                font-size: 20px;

                .tip {
                    width: 3px;
                    background-color: #32d3dc;
                    margin-right: 5px;
                }

                .txt {
                    font-weight: bold;
                    color: rgb(0, 164, 242) !important;
                }
            }
        }
    }
}

.fixed {
    height: 26px;
    display: flex;
    justify-content: center;
    /* 水平居中对齐 */
    align-items: center;
    /* 垂直居中对齐 */
    padding-bottom: 1px;
    font-weight: bold;
    padding: 10px 0;
}

.fixed>div {
    &:first-child {
        width: 10%;
    }

    &:not(:first-child) {
        width: 22.5%;
    }

    text-align: left;
    color: #2375a8;
}

.item1 {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}

.item1>div {
    &:first-child {
        width: 10%;
    }

    &:not(:first-child) {
        width: 22.5%;
    }

    text-align: left;
    margin: 5px 0px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.gardenFixed>div {
    &:not(:first-child) {
        width: 18%;
    }
}

.gardenItem>div {
    &:not(:first-child) {
        width: 18%;
    }
}
</style>